;(function(global) {
  global.checkbox = {
    template: `
              <div>
                <div class="radio-container">
                  <!-- 综合题的样式  -->
                  <div v-if="examItemData.isComplex">
                    <div>
                      <div class="subject-type-name">{{ examItemData.partsTitle }}</div>
                    </div>
                    <div class="radio-dry" :class="{isShowDry:isShowDry}">{{ index+1 }}、<span v-html='examItemData.topic'></span>
                    </div>
                    <div class="radio-switch-container">
                      <div class="radio-switch" @click="showDry"></div>
                    </div>
                    <span v-if="examItemData.isComplex" class="redio-complex-dry-num">
                      第{{ examItemData.smallIndex+1 }}小题&nbsp;
                      {{ examItemData.describe }}
                    </span>
                    <div class="radio-complex-hr"></div>
                  </div>

                  <!-- 单选题的标题  -->
                  <div v-else class="radio-type-two">
                    <div class="subject-type-name">{{ examItemData.partsTitle }}</div>
                    <span class="title-num">{{ index+1 }}、</span><span class="title-desc" v-html="examItemData.describe"></span>
                  </div>

                  <!-- 每道题答案选项 -->
                  <div>
                    <van-checkbox-group v-model="result" :disabled="checkboxDisable" @change="change">
                        <van-checkbox v-for="(val, key) in examItemData.options" :name="key" @click="checkboxChoose(key)" :class="answeredStyle[key]" class="needsclick">
                          <div v-html="val"></div>
                          <div slot="icon">
                            <span class="subject-option">{{key}}</span>
                          </div>
                        </van-checkbox>
                      </van-checkbox>
                    </van-checkbox-group>
                  </div>

                  <!-- 确认按钮 -->
                  <div v-show="isShowComfirm" class="checkbox-confirm" @click="confirmAnswer">确认</div>
                </div>

                <!-- 答案解析 -->
                <div class="answer-analysis-container" v-show="isShowAnswerAnalysis">
                  <div class="answer-analysis-hr"></div>
                  <div class="answer-analysis-right-answer"><span class="answer-analysis-right-answer-span">正确答案：</span>{{ answer }}</div>
                  <div class="answer-analysis">
                    <p class="answer-analysis-p">解析</p>
                    <div class="answer-analysis-content" v-html="examItemData.resolu">
                    </div>
                  </div>
                </div> 
              </div>
          `,
    props: ['where', 'examItemData', 'index'],
    data() {
      return {
        // 多选的结果
        result: [],
        // 最终结果
        selectionResult: [],
        // 判断是否是综合题
        isComplex: false,
        // 控制题干展开的开关
        switchControl: true,
        // 控制题干的展开
        isShowDry: true,
        // 控制多选是否能用
        checkboxDisable: false,
        // 用来判断在练习模式下选择答案后能否再次点击答案
        canClickChoose: true,
        // 控制确认按钮的显示
        isShowComfirm: true,
        // 答案
        answer: [],
        // 控制解析答案的显示
        isShowAnswerAnalysis: false,
        // 用来决定 点击答案过后的样式
        answeredStyle: {},
        // 用来判断是考试还是练习还是背题模式 0为考试模式 1为练习模式 2为背题模式
        // 每次进来之前需要判断模式 可以通过模式切换按钮切换
        doTestModule: 1
      }
    },
    computed: {},
    methods: {
      // 背题模式 type为1时是打开背题模式 为2时是关闭背题模式
      reciteModel(type) {
        if (type == 1) {
          // 设为背题模式 显示出答案
          for (let value of this.answer) {
            this.answeredStyle[value] = 'right-answer'
          }
          // 使答案不可在选择
          this.checkboxDisable = true
          this.canClickChoose = false
          // 关闭确认按钮
          this.isShowComfirm = false
          // 展开解释
          this.isShowAnswerAnalysis = true
        }
        // 取消背题模式
        if (type == 2) {
          // 当本题没有选择答案的时候 去除背题模式的答案及解析
          if (this.selectionResult.length === 0) {
            this.answeredStyle = {}
            this.isShowAnswerAnalysis = false
            // 使答案可再次选择
            this.checkboxDisable = false
            this.canClickChoose = true
            // 显示确认按钮
            this.isShowComfirm = true
            // 将选择了但是没有确认的选项样式加上
            for (let value of this.result) {
              this.answeredStyle[value] = 'examination-answer'
            }
          }
        }
      },

      // 在考试时切换为练习模式
      exerciseModel() {
        if (this.result.length !== 0) {
          this.answeredStyle = {}
          this.confirmAnswer()
        } else {
          this.isShowComfirm = true
        }
      },
      // 多选所选内容有变化的时候 考试模式就在此将数据保存起来
      change(result) {
        // result 为选择结果
        // 考试模式
        if (Number(this.where) === 1) {
          // 将选择答案且正确后的对将信息返回给答题卡
          const answerObj = {
            index: this.index,
            answerStatu: 'noJudge',
            selectResult: result
          }
          this.$emit('answerToSheet', answerObj)
        }
      },
      checkboxChoose(key) {
        if (this.answeredStyle.hasOwnProperty(key)) {
          delete this.answeredStyle[key]
        } else {
          this.answeredStyle[key] = 'examination-answer'
        }
      },

      // 展开题干按钮事件
      showDry() {
        this.switchControl = !this.switchControl
        this.isShowDry = !this.isShowDry
      },
      // 确认按钮事件
      confirmAnswer() {
        // 将选择存入最终结果
        this.selectionResult = this.result
        // 练习模式
        if (this.where !== 1) {
          const obj = {
            type: 0,
            selectAnswer: this.selectionResult,
            answer: this.answer,
            pointrules: this.examItemData.pointrules
          }

          // 提交去验证
          const resultObj = window.checkboxCheck(obj)
          resultObj.index = this.index
          this.$emit('answerToSheet', resultObj)
          // 练习模式
          // 点击一次答案后就不能在点击了
          if (this.canClickChoose == false) {
            return
          }
          for (let item of this.result) {
            if (this.answer.includes(item)) {
              this.answeredStyle[item] = 'right-answer'
            } else {
              this.answeredStyle[item] = 'wrong-answer'
            }
          }
          for (let item of this.answer) {
            if (!this.result.includes(item)) {
              this.answeredStyle[item] = 'is-answer'
            }
          }
          // 展示解析
          this.isShowAnswerAnalysis = true
          // 控制不可再次点击
          this.checkboxDisable = true
          this.isShowComfirm = false
        }
        // 背题模式
        // 此处需要父组件的按钮来触发
        if (this.doTestModule === 2) {
          this.answeredStyle[this.answer] = 'right-answer'
        }
      },
      // 清除答题记录
      clearHistory() {
        this.result = []
        this.selectionResult = []
        this.switchControl = true
        this.isShowDry = true
        this.checkboxDisable = false
        this.canClickChoose = true
        this.isShowAnswerAnalysis = false
        this.isShowComfirm = true
        this.answeredStyle = {}
      }
    },
    created() {
      this.answer = this.examItemData.answer

      if (Number(this.where) === 1) {
        // 考试模式
        this.isShowComfirm = false
      }
    },
    mounted() {}
  }
})(window)
